/**
* ClassName: BusinessLogin
* Package: src/views
* Description: 商家登录页面
*
* @Author Liu Wenrui
* @Create 2025/9/24 17:00
* @Version 1.1
*/

<template>
  <div class="wrapper">
    <h1>商家管理入口</h1>
    <div class="form-box">
      <div v-if="businessList.length === 0" class="form-item no-shop">
        <template v-if="pendingCount > 0">
          您的商铺正在审核中（{{ pendingCount }} 个），审核通过后即可管理。
        </template>
        <template v-else>
          您还没有商铺，请先注册！
        </template>
      </div>
      <div v-else>
        <h3>您拥有的商铺：</h3>
        <ul class="shop-list">
          <li v-for="b in businessList" :key="b.id" class="shop-item">
            <span class="shop-name">{{ b.businessName }}</span>
            <button class="manage-btn" @click="goToManage(b.id)">进入管理</button>
          </li>
        </ul>
      </div>
      <div class="form-item">
        <button @click="register">去注册商铺</button>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';
export default {
  name: 'BusinessLogin',
  data() {
    return {

      businessList: [],
      pendingCount: 0
    };
  },
  mounted() {
    this.$axios.get('/user').then(res => {
      const user = res.data;
      if (user && user.id) {
        this.$axios.get('/businesses', { params: { ownerId: user.id } })
          .then(res2 => {
            const all = Array.isArray(res2?.data?.data) ? res2.data.data : [];
            const approved = all.filter(b => String(b?.remarks || '').includes('审核通过'));
            this.businessList = approved;
            this.pendingCount = Math.max(all.length - approved.length, 0);
          })
          .catch(() => {
            this.businessList = [];
            this.pendingCount = 0;
          });
      }
    });
  },
  methods: {
    goToManage(businessId) {
      this.$router.push({ path: '/productManagement', query: { businessId } });
    },
    register() {
      this.$axios.get('/user').then(res => {
        const user = res.data;
        if (user && user.id) {
          this.$router.push({ path: '/business-register', query: { userId: user.id } });
        } else {
          alert('无法获取用户信息，请重新登录！');
        }
      });
    }
  },
  components: { Footer },
}
</script>

<style scoped>
.wrapper {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6vh;
  background: #f8f9fa;
}

.form-box {
  width: 90vw;
  max-width: 500px;
  margin-top: 3vh;
  padding-bottom: 80px;
}

.no-shop {
  color: #e74c3c;
  text-align: center;
  margin-bottom: 24px;
}

.shop-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.shop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 12px 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.shop-name {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.manage-btn {
  background: #409EFF;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 18px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.manage-btn:hover {
  background: #3074c9;
}

.form-item button {
  width: 100%;
  height: 44px;
  background-color: #409EFF;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  margin-top: 8px;
}
</style>